<template>
  <BreadcrumbBar
    parent-label="AI Service Management"
    child-label="AI Service Record"
  ></BreadcrumbBar>

  <InputForm>
    <InputItem label="访问者账号">
      <el-input
        v-model="queryLogRecordCondition.account"
        clearable
        placeholder="account"
    /></InputItem>
    <InputItem label="访问者昵称">
      <el-input
        v-model="queryLogRecordCondition.nickname"
        style="width: 100%; height: 100%"
        clearable
        placeholder="nickName"
    /></InputItem>
    <InputItem label="访问者id">
      <el-input
        v-model="queryLogRecordCondition.accessUserId"
        style="width: 100%; height: 100%"
        clearable
        placeholder="id"
    /></InputItem>
    <InputItem label="用户提问内容">
      <el-input
        v-model="queryLogRecordCondition.userMessage"
        style="width: 100%; height: 100%"
        clearable
        placeholder="message"
    /></InputItem>
    <InputItem label="内容日志描述">
      <el-input
        v-model="queryLogRecordCondition.description"
        style="width: 100%; height: 100%"
        clearable
        placeholder="accessStatus"
    /></InputItem>
    <InputItem label="AI响应状态">
      <el-input
        v-model="queryLogRecordCondition.responseStatus"
        style="width: 100%; height: 100%"
        clearable
        placeholder="responseStatus"
    /></InputItem>

    <ButtomItem label="操作">
      <el-button
        style="height: 100%"
        v-once-click
        color="#626aef"
        plain
        :icon="Search"
        @click="getPageAiServiceRecordList"
      >
        条件查询
      </el-button>
      <el-button
        style="height: 100%"
        v-once-click
        color="#626aef"
        plain
        :icon="Refresh"
        @click="resetQuery"
      >
        重置查询
      </el-button>

      <DesensitizeDataVerify
        @success-handler="getPageAiServiceRecordList"
      ></DesensitizeDataVerify>
    </ButtomItem>
  </InputForm>

  <!-- 日志表格 -->
  <TableCard operation-bar-label="系统访问日志表格">
    <template #table>
      <el-table
        :data="queryLogRecordList"
        stripe
        style="width: 100%"
        :max-height="tableHeight"
        :headerCellStyle="tableHeaderCellStyle"
      >
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column property="account" label="Account" width="120" />
        <el-table-column property="nickname" label="Nickname" width="120" />
        <el-table-column property="accessUserId" label="UserId" width="200" />
        <el-table-column
          property="consumeTime"
          label="Consume"
          width="120"
          sortable
        >
          <template #default="scope">
            <el-tag
              type="danger"
              effect="dark"
              v-if="judgeConsumeTime(scope.row.consumeTime) > 2000"
            >
              {{ scope.row.consumeTime }}ms
            </el-tag>
            <el-tag
              type="warning"
              effect="dark"
              v-else-if="judgeConsumeTime(scope.row.consumeTime) > 600"
            >
              {{ scope.row.consumeTime }}ms
            </el-tag>
            <el-tag type="success" v-else>
              {{ scope.row.consumeTime }}ms
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          property="userMessage"
          label="UserMessage"
          min-width="220"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          property="description"
          label="Description"
          width="220"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          property="responseStatus"
          label="ResponseStatus"
          width="140"
        >
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.responseStatus == 200">
              {{ scope.row.responseStatus }}
            </el-tag>
            <el-tag type="danger" v-else>{{ scope.row.responseStatus }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          property="responseContent"
          label="ResponseContent"
          width="220"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          property="createTime"
          label="CreateTime"
          width="190"
          sortable
          fixed="right"
        />
      </el-table>
    </template>

    <template #paginationBar>
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :total="logRecordTotal"
        :page-sizes="[20, 50, 80, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handlePageSizeChange"
        @current-change="handlePageNumChange"
    /></template>
  </TableCard>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { Refresh, Search } from '@element-plus/icons-vue'
// import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
import { storeToRefs } from 'pinia'
import { useWindowSizeStore, useThemeStore } from '@/features/store/store'
import { useMessageAlertStore } from '@/features/store/componentStore'
import { getPageAiServiceRecordListApi } from '@/request/api/aiServiceRecord'

import DesensitizeDataVerify from '@/components/DesensitizeDataVerify/DesensitizeDataVerify.vue'
import InputForm from '@/components/InputForm/InputForm.vue'
import InputItem from '@/components/InputForm/InputItem.vue'
import ButtomItem from '@/components/InputForm/ButtomItem.vue'
import TableCard from '@/components/TableCard/TableCard.vue'
import BreadcrumbBar from '@/components/BreadcrumbBar/BreadcrumbBar.vue'

const { tableHeaderCellStyle } = useThemeStore()
const { openAlert } = useMessageAlertStore()

const { windowHeight, windowWidth } = storeToRefs(useWindowSizeStore())

// 表格高度
const tableHeight = computed(() => {
  if (windowWidth.value > 1650) return windowHeight.value - 410
  else return windowHeight.value - 460
})

onMounted(() => {
  getPageAiServiceRecordList()
})

const logRecordTotal = ref<number>(0)
const pageNum = ref<number>(1)
const pageSize = ref<number>(100)
const handlePageNumChange = (val: number) => {
  pageNum.value = val
  getPageAiServiceRecordList()
}
const handlePageSizeChange = (val: number) => {
  pageSize.value = val
  getPageAiServiceRecordList()
}

// 查询日志的条件
const queryLogRecordCondition =
  ref<AiServiceRecord.QueryAiServiceRecordConditionItf>({
    account: null,
    nickname: null,
    accessUserId: null,
    userMessage: null,
    description: null,
    responseStatus: null,
  })
// 查询到的日志列表
const queryLogRecordList = ref<
  AiServiceRecord.QueryAiServiceRecordConditionItf[]
>([])

// 获取日志列表
const getPageAiServiceRecordList = async () => {
  const res = await getPageAiServiceRecordListApi(
    pageNum.value,
    pageSize.value,
    queryLogRecordCondition.value
  )
  if (res.code !== 200) return openAlert.error(res.message)

  // ElMessage.success('查询日志成功')
  queryLogRecordList.value = res.data.records
  logRecordTotal.value = res.data.total
}

// 重置条件查询
const resetQuery = () => {
  queryLogRecordCondition.value = {
    account: null,
    nickname: null,
    accessUserId: null,
    userMessage: null,
    description: null,
    responseStatus: null,
  }
  getPageAiServiceRecordList()
}

const judgeConsumeTime = (time: number): number => {
  // const len = time.length
  // return (time.substring(0, len - 2) as any) * 1
  return time
}
</script>

<style lang="less" scoped></style>
